<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>42.缓动效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
  /*
    难题：给过渡和动画加上缓动效果

    一、弹跳动画

      1. 可以指定 animation-timing-function / transition-timing-function 属性
        ease-in, ease-out, ease-in-out, linear
        贝塞尔曲线：http://cubic-bezier.com/

        .ball {
          animation: bounce 2s cubic-bezier(.1, .25, 1, .25) forwards;
        }

        @keyframes bounce {
          60%, 80%, to {
            transform: translateY(400px);
            animation-timing-function: ease;
          }

          70% {
            transform: translateY(300px);
          }

          90% {
            transform: translateY(360px);
          }
        }
    
    二、弹性过渡

      1. 文本输入框，每当它被聚焦时，都需要展示一个提示框
        贝塞尔曲线：我们可以在垂直方向上突破 0~1 区间，从而让过渡达到低于 0 或高于 100% 的程度
      
        // 知识点
        a + b {}：选择 a 毗邻的 b 元素
        a:not(.c) + b {}：选择类名不含 c 的 a 元素毗邻的 b 元素
        a + b:not(.c) {}：选择 a 毗邻的，类名不含 c 的 b 元素
        a:not(:focus) + b:not(:hover) {}：选择没有被 focus 的 a 元素毗邻的，并且没有被 hover 的 b元素

        input:not(:focus) + .callout:not(:hover) {
          transform: scale(0);
          transition: .25s transform;
        }

        .callout {
          transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
        }
  
  */
  </script>

  <style>
    body {
      background: linear-gradient(skyblue, white 450px, yellowgreen 0);
      min-height: 100vh;
      margin: 0;
    }

    .ball {
      width: 0;
      height: 0;
      padding: 1.5em;
      border-radius: 50%;
      margin: auto;
      background: red radial-gradient(at 30% 30%, #fdd, red);
      animation: bounce 2s cubic-bezier(.1, .25, 1, .25) forwards;
    }

    @keyframes bounce {
      60%, 80%, to {
        transform: translateY(400px);
        animation-timing-function: ease;
      }

      70% {
        transform: translateY(300px);
      }

      90% {
        transform: translateY(360px);
      }
    }

    input:not(:focus) + .callout:not(:hover) {
      transform: scale(0);
      transition: .25s transform;
    }

    .callout {
      transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
      transform-origin: 1.4em -.4em;
    }

    input {
      display: block;
      padding: 0 .4em;
      font: inherit;
    }

    .callout {	
      position: absolute;
      max-width: 14em;
      padding: .6em .8em;
      border-radius: .3em;
      margin: .3em 0 0 -.2em;
      background: #fed;
      border: 1px solid rgba(0,0,0,.3);
      box-shadow: .05em .2em .6em rgba(0,0,0,.2);
      font-size: 75%;
    }

    .callout:before {
      content: "";
      position: absolute;
      top: -.4em;
      left: 1em;
      padding: .35em;
      background: inherit;
      border: inherit;
      border-right: 0;
      border-bottom: 0;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="ball"></div>
  <br />
  <label>
    Your username:
    <input value="leaverou"></input>
    <span class="callout">
    Only letters, numbers, underscores (_) and hyphens (-) allowed!
    </span>
  </label>
</body>
</html>